<template>
  <div class="home">

    <el-row>
      <el-col :span="8">
        <h2>单选按钮</h2>
        <!-- 静态绑定 -->
        <!-- <el-radio v-model="radio" label="1" >男</el-radio>
    <el-radio v-model="radio" label="2">女</el-radio> -->

        <!-- 动态绑定注意数据的类型 -->
        <el-radio v-model="radio" :label="1">男</el-radio>
        <el-radio v-model="radio" :label="2">女</el-radio>

        <h2>多选</h2>
        <el-radio-group v-model="radio1">
          <el-radio-button label="上海"></el-radio-button>
          <el-radio-button label="北京"></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>

        <el-checkbox-group v-model="checkList">
          <el-checkbox label="复选框 A"></el-checkbox>
          <el-checkbox label="复选框 B"></el-checkbox>
          <el-checkbox label="复选框 C"></el-checkbox>
          <el-checkbox label="禁用" disabled></el-checkbox>
          <el-checkbox label="选中且禁用" disabled></el-checkbox>
        </el-checkbox-group>
        <h2>input框</h2>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>

        <h2>下拉框</h2>
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

        <h2>开关</h2>
        <el-switch v-model="valuesw" active-color="#13ce66" inactive-color="#ff4949">
        </el-switch>
      </el-col>

    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'HomeView',
  components: {

  },
  data() {
    return {
      radio: 1,
      radio1: '广州',
      // 数组
      checkList: ['选中且禁用', '复选框 A'],
      input: '',
      pwd: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '选项3',
      valuesw: true
    }
  }
}
</script>
<style lang="less">

</style>
